<template>
  <el-dialog title="系统信息" :visible.sync="value" width="60%" :before-close="beforeClose">
    <el-form ref="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="徐汇备案号">{{ form.xhRegCode }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="系统名称">{{ form.systemName }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保护等级">
            {{ systemLevelDict.find((it) => it.value == form.systemLevel)
            ? systemLevelDict.find((it) => it.value == form.systemLevel)
            .label
            : '' }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="测评情况">{{ form.hasTest ? '是' : '否' }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="测评时间">{{ form.testTime }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="测评机构">{{ form.testOrg }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="复测情况">{{ form.hasRetest ? '是' : '否' }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="复测机构">{{ form.retestOrg }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="等保编号">{{ form.gradingProtectionNo }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="安全评分">{{ form.securityScore }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="评估机构">{{ form.evalOrg }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button class="submit-btn" @click="beforeClose">
      关闭
      <i class="el-icon-arrow-right"></i>
    </el-button>
  </el-dialog>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => null
    }
  },
  watch: {
    row(row) {
      if (row) {
        this.form = {
        xhRegCode: row.xhRegCode,
        systemName: row.systemName,
        systemLevel: row.systemLevel,
        hasTest: row.hasTest,
        testTime: row.testTime,
        testOrg: row.testOrg,
        hasRetest: row.hasRetest,
        retestOrg: row.retestOrg,
        gradingProtectionNo: row.gradingProtectionNo,
        securityScore: row.securityScore,
        evalOrg: row.evalOrg
        }
      }
    }
  },
  data() {
    return {
      form: {
        xhRegCode: '',
        systemName: '',
        systemLevel: '',
        hasTest: '',
        testTime: '',
        testOrg: '',
        hasRetest: '',
        retestOrg: '',
        gradingProtectionNo: '',
        securityScore: '',
        evalOrg: ''
      }
    };
  },
  computed: {
    checkTaskTypeDict() {
      const dict = this.$store.getters.dict;
      const list = [];
      for (let value in dict.checkTaskType) {
        list.push({
          label: dict.checkTaskType[value],
          value
        });
      }
      return list;
    },
    systemLevelDict() {
      const dict = this.$store.getters.dict;
      const list = [];
      for (let value in dict.systemLevel) {
        list.push({
          label: dict.systemLevel[value],
          value
        });
      }
      return list;
    }
  },
  methods: {
    beforeClose() {
      this.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog .el-dialog__body {
  padding: 30px 0 0;
}
.check-list {
  padding: 0 40px;
}
.submit-btn {
  width: 100%;
  height: 44px;
  background: #1c4088;
  box-shadow: 0px 4px 48px 32px rgba(6, 23, 80, 0.05);
  border-radius: 0;
  color: #ffffff;
  border: none;
}
</style>